<template>
	<view class="content">
		<view class="app-title ac">
			<view class="fl" @click="back"><image class="back" src="/static/img/back.png"></image></view>作业记录
		</view>
		
		<view class="top-bg"></view>
		
		<view class="detail">
			<u-cell-group>
				<u-cell-item title="开始时间" :value="data_list.starttime" :arrow="false"></u-cell-item>
				<u-cell-item title="结束时间" :value="data_list.endtime == '' ? '请选择' : data_list.endtime" @click="show_date=true;"></u-cell-item>
				<u-cell-item title="作业操作" :value="job_name" @click="show_picker=true;columns=job_arr;"></u-cell-item>
				<u-cell-item title="完成情况" :value="status_name" @click="show_picker=true;columns=status_arr;"></u-cell-item>
			</u-cell-group>
			<!-- <CellGroup>
				<Cell title="开始时间" :value="data_list.starttime" ></Cell>
				<Cell title="结束时间" is-link :value="data_list.endtime == '' ? '结束日期' : data_list.endtime" @click="show_date = true"></Cell>
				<Cell title="作业操作" placeholder="请输入用户名" is-link v-model="job_name" @click="show_picker = true;columns = job_arr"></Cell>
				<Cell title="完成情况" placeholder="请输入用户名" is-link v-model="status_name" @click="show_picker = true;columns = status_arr"></Cell>
			</CellGroup> -->
			<view class="job-detail">作业详情：</view>
			<textarea class="text" v-model="data_list.details"></textarea>
			<view class="job-detail">拍照上传：</view>
			<view class="photo">
				<!-- <view class=" img-item" v-for="(img,i) in img_list" :key="i"><image class="images" :src="img"></image><image class="remove" src="/static/img/coolicon.png" @click="removeImg(i)"></image></view> -->
				
				<u-upload :action="action" @on-success='backImg'></u-upload>
				<!-- <u-upload :auto-upload="false" @on-choose-complete="chooseImg" @on-remove="removeImg"></u-upload> -->
				<!-- <view class=" img-item"><view class="upload ac">+</view></view> -->
			</view>
			
			<view class="btn">
				<button class="cancel-btn" @click="jumpUrl('/pages/alarm/fault?id='+alarm_code)">查看维修建议</button><button class="default-btn fr" @click="overJob">完成作业</button>
			</view>
		</view>
		
		<view class="full" v-show="show_picker || show_date"></view>
		<u-picker v-model="show_date" mode="time" :params="params" @confirm="setDate" @cancel="cancel"></u-picker>
		<u-select v-model="show_picker" :list="columns" label-name="text" @confirm="onConfirm" @cancel="cancel"></u-select>
		<!-- <Picker v-show="show_picker" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel"></Picker>
		<DatetimePicker v-model="currentDate" v-show="show_date" type="datetime" :min-date="minDate" @confirm="setDate" @cancel="cancel"></DatetimePicker> -->
		
		<!-- <JobSelect v-show="show_dialog" @closeFull="show_dialog = false"></JobSelect> -->
	</view>
</template>

<script>
import JobSelect from '../../components/myWork/jobSelect'
// import { Field,Cell,CellGroup,Uploader,Picker,DatetimePicker } from 'vant'
export default{
	// components:{ JobSelect,Field,Cell,CellGroup,Uploader,Picker,DatetimePicker },
	data() {
		return {
			action : this.baseUrl()+"/home/uploadImageAppTurnoutForm",
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: true
			},
			code : '',
			columns : [],
			job_arr: [{ text: '更换设备', value:0,extra:'job' },{ text: '设备下道', value:1,extra:'job' },{ text: '设备上道', value:2,extra:'job' },{ text: '检查设备', value:3,extra:'job' }],
			status_arr: [{ text: '未完成', value:0,extra:'status' },{ text: '已完成',value:1,extra:'status' }],
			data_list : {
				id : '',
				starttime : this.now(),
				endtime : '',
				status : '',
				operation : '',
				imgs : [],
				details : '',
				eqtSDTO: {
				    "eqtOrgName": "test",  //org名称
				    "eqtOrgid": "1",  //orgid
				    "eqtStation": "test", //车站名称
				    "eqtVos": [ //器材详情列表
				      {
				        "equId": "1",  //设备id
				        "equModel": "test", //设备型号
				        "equName": "test", //设备名  (上道位置，下道位置)
				        "equTypeId": "1", //设备类型Id
				        "equTypeName": "test", //设备类型名
				        "factory": "test", //生产厂家
				        "note": "test", //上下道设备位置备注
				        "orgId": "1", //机构id
				        "orgName": "test", //机构名称
				        "propName": "test", //属性名称
				        "propValue": "test", //属性值
				        "sdTime": "2021-08-16 02:46:59", //上道时间
				        "stationDbm": "test", //车站码
				        "stationName": "test", //车站名
				        "zcCode": "test", //器材条码
				        "zcId": "1", //zc表中id
				        "zcName": "test" //器材名
				      }
				    ],
				    "notes": [   //上道位置备注
				      "test"
				    ],
				    "option": "saveEqtSd",  //操作   saveEqtSd 上道，  saveEqtXd 下道saveEqtReplace 更换
				    "sdDbm": "test", //上道车站
				    "sdEqtZCid": [  //上道器材id
				      "1"
				    ],
				    "sdEqtid": [  //上道设备id
				      "1"
				    ],
				    "uid": this.getUserId(), //用户id
				    "workId": "1", //工作id
				    "xdDbm": "test", //下道车站
				    "xdEqtZCids": [ //下道器材id
				      "1"
				    ],
				    "xdEqtids": [  //下道设备id
				      "1"
				    ],
				    "xdgoto": "1"  //下道去向
				  }
			},
			alarm_code : '',
			img_list : [],
			job_name : '请选择',
			status_name : '请选择',
			currentDate : new Date(),
			minDate: new Date(),
			show_dialog : false,
			show_picker:false,
			show_date:false
		}
	},
	onLoad(options){
		this.alarm_code = options.id;
		this.data_list.id = options.code;
	},
	// mounted() {
	// 	// 创建附件上传
	// 	var _self = this;
	// 	var input = document.createElement('input');//创建元素
	// 	input.type = 'file';//添加file类型
	// 	input.style.cssText = "position:absolute;width:100%;height:100%;top:0;left:0;z-index: 20;opacity: 0;";
	// 	input.onchange = (event) => {
	// 		_self.upFile(input, event)
	// 	}
	// 	this.$refs.input.$el.appendChild(input)
	// },
	methods:{
		back() {
			uni.navigateBack();
		},
		chooseImg(lists){
			console.log(lists[lists.length-1]);
			var formData = new FormData();
			formData.append("token","kshdfiwi3rh");
		},
		backImg(data, index, lists) {
			this.data_list.imgs.push(data.data);
		},
		// upFile(input, event) {
		// 	let reader = new FileReader();
		// 	//将文件以Data URL形式读入页面  
		// 	reader.readAsDataURL(input.files[0]);
		// 	reader.onload = (e)=> {
		// 		this.afterRead(reader.result);
		// 	}
		// },
		// afterRead(file) {
		//     // 此时可以自行将文件上传至服务器
		// 	this.fetch('POST',this.baseUrl+'/home/uploadImageAppTurnout',{base64:file},true).then((res)=>{
		// 		if(res.returnCode == 1) {
		// 			// this.img_list.push((this.baseUrl+res.data).replace(/\\/g,'/'));
		// 			this.data_list.imgs.push(res.data);
		// 		}
		// 	})
		// },
		removeImg(index, lists, name) {
			// this.img_list.splice(i,1);
			this.data_list.imgs.splice(index,1);
		},
		jumpUrl(url) {
			uni.navigateTo({
			    url: url
			});
		},
		onConfirm(value, index) {
			if(value[0].extra == 'job'){
				this.data_list.operation = value[0].value;
				this.job_name = value[0].label;
				if(value[0].label == '更换设备'){
					this.jumpUrl('/pages/device/changeDevice');
				}else if(value[0].label == '设备下道'){
					this.jumpUrl('/pages/device/deviceDown');
				}else if(value[0].label == '设备上道'){
					this.jumpUrl('/pages/device/deviceOn');
				}
			}else{
				this.data_list.status = value[0].value;
				this.status_name = value[0].label;
			}
			// console.log(`当前值：${value.text}, 当前索引：${index}`);
			this.cancel();
		},
		cancel() {
			this.show_date = false;
			this.show_picker = false;
		},
		now() {
			let date = new Date();
			return date.getFullYear() +'-'+ ((date.getMonth()+1) < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) +'-'+ (date.getDate() < 10 ? '0'+date.getDate() : date.getDate())+' '+(date.getHours()<10 ? '0'+date.getHours() : date.getHours())+':'+(date.getMinutes()<10 ? '0'+date.getMinutes() : date.getMinutes())+':00';
		},
		setDate(obj) {
			let str = obj.year+'-'+obj.month+'-'+obj.day+' '+obj.hour+':'+obj.minute+':'+obj.second;
			this.data_list.endtime = str;
			this.cancel();
		},
		overJob() {
			this.data_list.imgs = this.data_list.imgs.join(',');
			this.fetch('POST',this.baseUrl()+'/home/saveTodoJob',this.data_list,true).then((res)=>{
				if(res.returnCode == 1) {
					uni.showToast({title:'作业完成',icon:'none'});
					setTimeout(()=>{
						uni.navigateTo({
						    url: '/pages/myWork/index'
						});
					},2000)
				}else{
					uni.showToast({title:res.message,icon:'none'});
				}
			})
		}
	}
}
</script>

<style scoped>
	.detail{
		width:91.5%;margin: 0 auto;background: #FFFFFF;box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);border-radius: 6px;padding-left: 16px;font-size: 14px;margin-top: -150px;position: relative;height: 86vh;
	}
	.job-detail{
		line-height: 45px;
	}
	.detail>.text{
		background: #F9FBFE;border: 1px solid #F1F1F1;border-radius: 6px;padding: 10px;font-size: 14px;height: 104px;overflow: auto;width:95.5%;
	}
	.detail>.photo{
		overflow-x: auto;width: 100%;height: 100px;white-space: nowrap;
	}
	.detail>.photo>.img-item{
		width: 80px;height: 80px;margin-right: 10px;border-radius: 6px;display: inline-block;vertical-align: middle;position: relative;overflow: hidden;
	}
	.detail>.photo>.img-item>.upload,input[type="file"]{
		position: absolute;width: 100%;height: 100%;left: 0;top: 0;bottom: 0;right: 0;margin:auto; z-index: 10;line-height: 80px;border:1px solid #d7d7d7;border-radius: 4px;font-size: 24px;
	}
	input[type="file"]{
		opacity: 0;filter: opacity(0);z-index: 20;
	}
	.detail>.btn{
		position: absolute;bottom: 3%;left: 0;width: 100%;padding: 0 20px;
	}
	.detail>.btn>button{
		width: 48%;display: inline-block;
	}
	.photo .images{
		width: 80px;height: 80px;
	}
	.photo .remove{
		width: 14px;height: 14px;position: absolute;top:5px;right: 5px;border-radius: 50%;
	}
	
	.van-cell__value{
		color: #3E3A39;
	}
</style>
